let angle;
let depth;
let len;

function setup() {
    createCanvas(800, 600);
    angleMode(DEGREES);
    
    // 获取滑块元素
    const angleSlider = document.getElementById('angleSlider');
    const depthSlider = document.getElementById('depthSlider');
    const lengthSlider = document.getElementById('lengthSlider');
    
    // 添加事件监听器
    angleSlider.addEventListener('input', () => {
        angle = angleSlider.value;
    });
    depthSlider.addEventListener('input', () => {
        depth = depthSlider.value;
    });
    lengthSlider.addEventListener('input', () => {
        len = lengthSlider.value;
    });
    
    // 初始化值
    angle = angleSlider.value;
    depth = depthSlider.value;
    len = lengthSlider.value;
}

function draw() {
    background(240);
    stroke(70);
    strokeWeight(2);
    
    // 将树干的起点移到画布底部中心
    translate(width/2, height);
    
    // 因为在p5.js中，0度指向右边，我们需要将树干旋转-90度使其向上
    rotate(-90);
    
    // 开始递归绘制分形树
    branch(len, depth);
}

function branch(len, n) {
    // 绘制当前树枝
    line(0, 0, len, 0);
    
    // 如果递归深度大于0，继续分叉
    if (n > 0) {
        // 保存当前变换状态
        push();
        
        // 移动到树枝末端
        translate(len, 0);
        
        // 右分支
        push();
        rotate(angle);
        branch(len * 0.7, n - 1);
        pop();
        
        // 左分支
        push();
        rotate(-angle);
        branch(len * 0.7, n - 1);
        pop();
        
        // 恢复变换状态
        pop();
    }
}